<template>
        <el-card shadow="never" style="max-height: 70vh; overflow: auto">
            <el-form ref="form" :model="form" :rules="rules" label-width="90px" :disabled="disabled">
                <el-form-item label="id:" prop="id" v-show="false">
                    <el-input v-model="form.id" disabled />
                </el-form-item>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="类型:" prop="event_type">
                            <el-select v-model="form.event_type" placeholder="请选择类型" clearable>
                                <el-option v-for="(item, index) in event_type" :key="index" :label="item.label" :value="item.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="周数:" prop="event_week">
                            <el-input-number v-model="form.event_week" :step="1" :min="0"></el-input-number>
                            <div>周数填写“0”为通用，没有对应周数配置时获取该配置</div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="大小标题:" prop="size_title">
                            <el-input v-model="form.size_title" placeholder="请输入大小标题" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="头臀径:" prop="size_toutun">
                            <el-input v-model="form.size_toutun" placeholder="请输入头臀径" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="胎重:" prop="size_taizhong">
                            <el-input v-model="form.size_taizhong" placeholder="请输入胎重" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="身长:" prop="size_shenchang">
                            <el-input v-model="form.size_shenchang" placeholder="请输入身长" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="双顶径:" prop="size_shuangding">
                            <el-input v-model="form.size_shuangding" placeholder="请输入双顶径" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="股骨长:" prop="size_gugu">
                            <el-input v-model="form.size_gugu" placeholder="请输入股骨长" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="头围:" prop="size_touwei">
                            <el-input v-model="form.size_touwei" placeholder="请输入头围" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="腹围:" prop="size_fuwei">
                            <el-input v-model="form.size_fuwei" placeholder="请输入腹围" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="体重男:" prop="size_tizhong_nan">
                            <el-input v-model="form.size_tizhong_nan" placeholder="请输入体重男" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="体重女:" prop="size_tizhong_nv">
                            <el-input v-model="form.size_tizhong_nv" placeholder="请输入体重女" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="身高男 :" prop="size_shengao_nan">
                            <el-input v-model="form.size_shengao_nan" placeholder="请输入身高男 " clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="身高女:" prop="size_shengao_nv">
                            <el-input v-model="form.size_shengao_nv" placeholder="请输入身高女" clearable />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="状态:" prop="status">
                    <el-select v-model="form.status" placeholder="请选择状态" clearable>
                        <el-option v-for="(item, index) in status" :key="index" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm">确认 </el-button>
                    <el-button type="warning" @click="cancel">取消 </el-button>
                </el-form-item>
            </el-form>
        </el-card>
</template>

<script>
import { regionData } from 'element-china-area-data'
export default {
    name: 'EditForm',
    props: {
        findFormData: {
            type: Object,
            default: {}
        },
        editFormParams: {
            type: Object,
            default: {}
        },
        // 表单是否禁用
        disabled: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            // 编辑表单验证规则
            rules: {
                event_type: [{ required: true, message: "请输入类型", trigger: "blur" }],
                event_week: [{ required: true, message: "请输入周数", trigger: "blur" }],

            },
            form: {  },
            // 区域选择配置
            areaOptions: regionData,
            event_type:[
               { label: "记经期", value: 1 },
               { label: "备孕中", value: 2 },
               { label: "已怀孕", value: 3 },
               { label: "已出生", value: 4 },
            ],
            status:[
               { label: "启用", value: 1 },
               { label: "禁用", value: 2 },
            ],

        }
    },
    watch: {
        findFormData: {
           handler(nval) {
                if (JSON.stringify(nval) != '{}') {
                    this.$nextTick(() => {
                        this.form = nval
                    })
                }
            },
            immediate: true,
            deep: false,
        },
    },
    methods: {
        // 取消按钮
        cancel() {
            this.$emit('editFormCancel')
        },

        submitForm() {
            this.$refs['form'].validate((valid, obj) => {
                if (valid) {
                    this.$emit('submitForm', this.form)
                }
            })
        },

        // 表单重置
        reset() {
            this.resetForm('form')
        }
    }
}
</script>
